<template>
  <div>
    <div class="uInfo">
      <el-card shadow="never" class="mgb20">
        <div class="head">
          <div>{{$t("home.personalData")}}</div>
             <router-link class="tocent" to="/author/center/userInfo"
            >{{$t("home.view")}}
            <img src="../../../../assets/authorCenter/angle_mark.png" alt="" class="angle_mark">
            </router-link
          >
         
        </div>
        <div class="content">
          <div class="lot slok">
            <div class="uavatar">
              <el-avatar :size="100">
                <img :src="writeInfoMess.src" alt="" />
              </el-avatar>
            </div>
            <div class="writeInfo_name">
              {{ writeInfoMess.name }}
              <div class="cumulative">累计创作n天</div>
            </div>
          </div>
          <!-- <div class="fontNumContent">
            <div class="number slok">
              <h5>{{ writeInfoMess.thisMonthWordCount }}</h5>
              <p>{{$t("home.createdWords")}}</p>
            </div>
            <div class="countNumber slok">
              <h5>{{ writeInfoMess.totalWriteWordCount }}</h5>
              <p>{{$t("home.cumulativeWords")}}</p>
            </div>
          </div> -->
          <!-- <div class="day slok">
            <h5>{{ writeInfoMess.mdays }}</h5>
            <p>本月创作天数</p>
          </div> -->
        </div>
        <!-- 字数 -->
        <div class="count_box">
          <div class="count_con">
            <div class="count_num">{{ writeInfoMess.thisMonthWordCount }}</div>
            <div class="count_text">{{$t("home.createdWords")}}</div>
          </div>
          <div class="count_con">
            <div class="count_num">30</div>
            <div class="count_text">本月创作字数</div>
          </div>
          <div class="count_con">
            <div class="count_num">{{ writeInfoMess.totalWriteWordCount }}</div>
            <div class="count_text">{{$t("home.cumulativeWords")}}</div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- <div class="uInfo">
      <el-card shadow="hover">
        <lowNews :dataNews="datalist" headTitle="站内活动"></lowNews>
      </el-card>
    </div> -->
    <!-- <div class="uInfo">
      <el-card shadow="hover">
        <lowNews :dataNews="datalist"></lowNews>
      </el-card>
    </div> -->
  </div>
</template>

<script>
import lowNews from "@/page/home/component/lowNews.vue";
import { writeInfo,getAuthorInfo } from "@/api/info";
export default {
  name: "dashboard",
  data() {
    return {
      writeInfoMess: {
        name: "",
        thisMonthWordCount: '',
        src: "",
        totalWriteWordCount: '',
      },
      datalist: [
        {
          title: "xinwen",
          content: "asdadasdasdasdasdasd",
          time: "2000-11-21",
          img: "",
          id: 1,
          tip: true,
        },
        {
          title: "xinwen2",
          content: "asdadasqe1331dasdasdasdasd",
          time: "2000-11-22",
          img: "",
          id: 2,
        },
        {
          title: "xinwen3",
          content: "asdadwqwewqsdaccdaasdasdasdasdasd",
          time: "2000-11-21",
          img: "",
          id: 3,
        },
      ],
    };
  },
  components: {
    lowNews: lowNews,
  },
  methods: {
    //获取作者写作信息
    getWriteInfo() {
      writeInfo().then((res) => {
        if (res.code == 1) {
          this.writeInfoMess.totalWriteWordCount =
            res.source.totalWriteWordCount;
          this.writeInfoMess.thisMonthWordCount = res.source.thisMonthWordCount;
        }
      });
    },
      getUserInfo() {
      getAuthorInfo().then((res) => {
        this.$store.state.userInfo.phone = res.source.authorInfo.phone;
        this.$store.state.userInfo.userName = res.source.userName;
        this.$store.state.userInfo.realName = res.source.authorInfo.realName;
        this.$store.state.userInfo.coverUrl = res.source.authorInfo.headImgUrl
        this.uInfo = res.source;
       let params = JSON.parse(sessionStorage.getItem('userInfo'))
       params.coverUrl =res.source.authorInfo.headImgUrl
        sessionStorage.setItem('userInfo',JSON.stringify(params))

      });
    },
  },
  created() {},
  computed: {
    userInfo: function () {
      return this.$store.state.userInfo;
    },
  },
  mounted() {
    this.getUserInfo()
    this.getWriteInfo();
    this.writeInfoMess.name = this.userInfo.authorName;
    this.writeInfoMess.src = this.userInfo.coverUrl;
  },
};
</script>
<style lang="scss">
.uInfo{
  .el-card__body{
    padding: 22px 40px;
  }
}
</style>
<style scoped="scoped" lang="scss">
::v-deep .el-card{
  border:none;
}
.tocent {
  font-size: 18px;
  color: #999;
  line-height: 35px;
  display: flex;
  align-items: center;
}
.fontNumContent {
  display: flex;
  div {
    margin-right: 30px;
  }
}
.head {
  font-size: 24px;
  font-weight: 500;
  color: #333333;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.mgb20 {
  margin-bottom: 20px;
}
.content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 20px;
  .lot {
    display: flex;
    flex-direction: row;
    // width: 200px;
  }
  .slok {
    box-sizing: border-box;
    // height: 80px;
    padding: 10px 0;
    text-align: center;
    h5 {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 22px;
      margin-left: 15px;
      line-height: 48px;
    }
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
    }
  }
}
.angle_mark{
  width: 9px;
  height: 16px;
  margin-left: 10px;
}
.writeInfo_name{
  text-align: left;
  color: #333;
  font-size: 22px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cumulative{
  color: #666;
  font-size: 16px;
  margin-top: 16px;
}
.count_box{
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.count_con{
  width: 286px;
  height: 160px;
  background: #F5F5F5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(.02, .01, .47, 1);
}
.count_num{
  font-size: 36px;
  color: #000;
}
.count_text{
  font-size: 18px;
  color: #666;
  margin-top: 16px;
}
.count_con:hover{
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    transform: translate(0,-5px);
    transition-delay: 0s !important;
}
</style>
